import { useTodoStore } from '@/store/todos'

const DemoThr: React.FC<unknown> = () => {
  const todos = useTodoStore((state) => state.todos)
  const toggleTodo = useTodoStore((state) => state.toggleTodo)
  return (
    <div>
      <ul>
        {Object.keys(todos).map((key) => (
          <button
            type="button"
            key={key}
            onClick={() => toggleTodo(key)}
            style={{ cursor: 'pointer' }}
          >
            <p>{todos[key].title}</p>
            <span>{String(todos[key].done)}</span>
          </button>
        ))}
      </ul>
    </div>
  )
}

export default DemoThr
